<template>
  <div class="box">
        <div class="list">
        <div class="list_titlea">
          <div>水文站数量(个)</div>
          <div style="color: aqua;">{{data.list.swzCnt}}</div>
        </div>
        <div class="list_title">
          <div>气象站数量(个)</div>
          <div style="color: aqua;">{{data.list.qxzCnt}}</div>
        </div>
        <div class="list_title">
          <div>雨水站数量(个)</div>
          <div style="color: aqua;">{{data.list.yszCnt}}</div>
        </div>
        <div class="list_title">
          <div>水质监测站数量(个)</div>
          <div style="color: aqua;">{{data.list.szjczCnt}}</div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { cityStatistics } from "@/api/home/index";
let data = reactive({
  arr: [],
  list: ""
 });
onMounted(()=>{
  // 城市普查数据请求
  cityStatistics().then((res) => {
    // console.log(res.data.data);
    data.list=res.data;
  })
})
</script>

<style scoped>
.box{
  height: 100%;
    color: white
}
.list{
  width: 100%;
  height: 100%;
  /* background-color: yellowgreen; */
}
.list_titlea{
  margin-top: 30px;
}
.list_title,.list_titlea{
  width: 90%;
  height: 50px;
  /* background-color: violet; */
margin-bottom: 10px;
  font-size: 16px;
  margin-left: 30px;
}
</style>